import 'dart:math';

import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:meal/constant/sizes.dart';
import 'package:meal/route/route.dart';
import 'package:meal/utils/colors.dart';
import 'package:meal/utils/styles.dart';

typedef Callback = void Function(String value);

///
/// 支付密码
///
class PayPwd extends StatefulWidget {
  final String pwd;

  final Callback? callback;

  final String title;

  final String? subTitle;

  const PayPwd({Key? key, required this.pwd, this.callback, this.title = '请输入交易密码', this.subTitle})
      : super(key: key);

  @override
  State<PayPwd> createState() => _PayPwdState();
}

class _PayPwdState extends State<PayPwd> {
  @override
  Widget build(BuildContext context) {
    return Material(
      color: Colors.transparent,
      child: Align(
        alignment: Alignment.bottomCenter,
        child: Container(
          height: 350 + (widget.subTitle != null ? 40 : 0),
          decoration: const BoxDecoration(
              color: Colors.white,
              borderRadius: BorderRadius.only(
                  topLeft: Radius.circular(Sizes.default15),
                  topRight: Radius.circular(Sizes.default15))),
          child: Column(
            children: [
              Stack(
                children: [
                  Column(
                    children: [
                      Container(
                        height: Sizes.default50,
                        alignment: Alignment.center,
                        child: Text(
                          widget.title,
                          style: StylesUtils.customTextStyle(
                              fontSize: Sizes.default16, color: ColorsUtils.color333),
                        ),
                      ),
                      if (widget.subTitle != null)
                        Container(
                          height: Sizes.default40,
                          alignment: Alignment.center,
                          child: Text(
                            '${widget.subTitle}',
                            style: StylesUtils.customTextStyle(
                                fontSize: Sizes.default13, color: ColorsUtils.color797),
                          ),
                        ),
                    ],
                  ),
                  Positioned(
                      top: 0,
                      right: Sizes.default20,
                      bottom: 0,
                      child: Center(
                          child: IconButton(
                              onPressed: () {
                                Navigator.of(context).pop();
                              },
                              icon: Icon(
                                Icons.close,
                                color: ColorsUtils.parseColorFromHexString(ColorsUtils.color000),
                                size: Sizes.default25,
                              ))))
                ],
              ),
              Container(
                height: Sizes.default50,
                width: double.maxFinite,
                padding: const EdgeInsets.symmetric(horizontal: Sizes.default15),
                child: CustomPaint(
                  painter: CustomPwd(pwd: widget.pwd),
                ),
              ),
              Container(
                height: Sizes.default50,
                alignment: Alignment.centerRight,
                padding: const EdgeInsets.only(right: Sizes.default20),
                child: TextButton(
                    onPressed: () {
                      Navigator.of(context).pop();
                      Get.toNamed(RouteGet.userTradeForgetPassword);
                    },
                    child: Text(
                      '忘记密码？',
                      style: StylesUtils.customTextStyle(
                          color: ColorsUtils.color006, fontSize: Sizes.default13),
                    )),
              ),
              Container(
                height: Sizes.default50,
                decoration: BoxDecoration(
                    border: Border(
                        top: BorderSide(color: ColorsUtils.parseColorFromHexString('#D7D7D7')))),
                child: Row(
                  children: [
                    Expanded(
                        child: Center(
                      child: TextButton(
                          onPressed: () {
                            setState(() {
                              changePwd('1');
                            });
                          },
                          child: Text(
                            '1',
                            style: StylesUtils.customTextStyle(
                                color: ColorsUtils.color333, fontSize: Sizes.default25),
                          )),
                    )),
                    Expanded(
                        child: Container(
                      decoration: BoxDecoration(
                          border: Border(
                              left:
                                  BorderSide(color: ColorsUtils.parseColorFromHexString('#D7D7D7')),
                              right: BorderSide(
                                  color: ColorsUtils.parseColorFromHexString('#D7D7D7')))),
                      child: TextButton(
                          onPressed: () {
                            changePwd('2');
                          },
                          child: Text(
                            '2',
                            style: StylesUtils.customTextStyle(
                                color: ColorsUtils.color333, fontSize: Sizes.default25),
                          )),
                    )),
                    Expanded(
                        child: Center(
                      child: TextButton(
                          onPressed: () {
                            changePwd('3');
                          },
                          child: Text(
                            '3',
                            style: StylesUtils.customTextStyle(
                                color: ColorsUtils.color333, fontSize: Sizes.default25),
                          )),
                    )),
                  ],
                ),
              ),
              Container(
                height: Sizes.default50,
                decoration: BoxDecoration(
                    border: Border(
                        top: BorderSide(color: ColorsUtils.parseColorFromHexString('#D7D7D7')))),
                child: Row(
                  children: [
                    Expanded(
                        child: Center(
                      child: TextButton(
                          onPressed: () {
                            changePwd('4');
                          },
                          child: Text(
                            '4',
                            style: StylesUtils.customTextStyle(
                                color: ColorsUtils.color333, fontSize: Sizes.default25),
                          )),
                    )),
                    Expanded(
                        child: Container(
                      decoration: BoxDecoration(
                          border: Border(
                              left:
                                  BorderSide(color: ColorsUtils.parseColorFromHexString('#D7D7D7')),
                              right: BorderSide(
                                  color: ColorsUtils.parseColorFromHexString('#D7D7D7')))),
                      child: TextButton(
                          onPressed: () {
                            changePwd('5');
                          },
                          child: Text(
                            '5',
                            style: StylesUtils.customTextStyle(
                                color: ColorsUtils.color333, fontSize: Sizes.default25),
                          )),
                    )),
                    Expanded(
                        child: Center(
                      child: TextButton(
                          onPressed: () {
                            changePwd('6');
                          },
                          child: Text(
                            '6',
                            style: StylesUtils.customTextStyle(
                                color: ColorsUtils.color333, fontSize: Sizes.default25),
                          )),
                    )),
                  ],
                ),
              ),
              Container(
                height: Sizes.default50,
                decoration: BoxDecoration(
                    border: Border(
                        top: BorderSide(color: ColorsUtils.parseColorFromHexString('#D7D7D7')))),
                child: Row(
                  children: [
                    Expanded(
                        child: Center(
                      child: TextButton(
                          onPressed: () {
                            changePwd('7');
                          },
                          child: Text(
                            '7',
                            style: StylesUtils.customTextStyle(
                                color: ColorsUtils.color333, fontSize: Sizes.default25),
                          )),
                    )),
                    Expanded(
                        child: Container(
                      decoration: BoxDecoration(
                          border: Border(
                              left:
                                  BorderSide(color: ColorsUtils.parseColorFromHexString('#D7D7D7')),
                              right: BorderSide(
                                  color: ColorsUtils.parseColorFromHexString('#D7D7D7')))),
                      child: TextButton(
                          onPressed: () {
                            changePwd('8');
                          },
                          child: Text(
                            '8',
                            style: StylesUtils.customTextStyle(
                                color: ColorsUtils.color333, fontSize: Sizes.default25),
                          )),
                    )),
                    Expanded(
                        child: Center(
                      child: TextButton(
                          onPressed: () {
                            changePwd('9');
                          },
                          child: Text(
                            '9',
                            style: StylesUtils.customTextStyle(
                                color: ColorsUtils.color333, fontSize: Sizes.default25),
                          )),
                    )),
                  ],
                ),
              ),
              Container(
                height: Sizes.default50,
                decoration: BoxDecoration(
                    border: Border(
                        top: BorderSide(color: ColorsUtils.parseColorFromHexString('#D7D7D7')))),
                child: Row(
                  children: [
                    Expanded(
                        child: Center(
                      child: TextButton(
                          onPressed: () {},
                          child: Text(
                            '',
                            style: StylesUtils.customTextStyle(
                                color: ColorsUtils.color333, fontSize: Sizes.default25),
                          )),
                    )),
                    Expanded(
                        child: Container(
                      decoration: BoxDecoration(
                          border: Border(
                              left:
                                  BorderSide(color: ColorsUtils.parseColorFromHexString('#D7D7D7')),
                              right: BorderSide(
                                  color: ColorsUtils.parseColorFromHexString('#D7D7D7')))),
                      child: TextButton(
                          onPressed: () {
                            changePwd('0');
                          },
                          child: Text(
                            '0',
                            style: StylesUtils.customTextStyle(
                                color: ColorsUtils.color333, fontSize: Sizes.default25),
                          )),
                    )),
                    Expanded(
                        child: Center(
                      child: TextButton(
                          onPressed: () {
                            if (widget.pwd.isNotEmpty) {
                              String pwd = widget.pwd.substring(0, widget.pwd.length - 1);
                              widget.callback!.call(pwd);
                            }
                          },
                          child: Text(
                            '删除',
                            style: StylesUtils.customTextStyle(
                                color: ColorsUtils.color333, fontSize: Sizes.default18),
                          )),
                    )),
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }

  void changePwd(String s) {
    widget.callback!.call(widget.pwd + s);
  }
}

class CustomPwd extends CustomPainter {
  ///  传入的密码，通过其长度来绘制圆点
  final String pwd;

  CustomPwd({required this.pwd});

  ///  此处Sizes是指使用该类的父布局大小
  @override
  void paint(Canvas canvas, Size size) {
    /// 密码画笔
    Paint mPwdPaint;
    Paint mRectPaint;

    /// 初始化密码画笔
    mPwdPaint = Paint();
    mPwdPaint.color = Colors.black;

    /// 初始化密码框
    mRectPaint = Paint();
    mRectPaint.color = const Color(0xff707070);

    ///  圆角矩形的绘制
    RRect r = RRect.fromLTRBR(0.0, 0.0, size.width, size.height, Radius.circular(size.height / 12));

    ///  画笔的风格
    mRectPaint.style = PaintingStyle.stroke;
    canvas.drawRRect(r, mRectPaint);

    ///  将其分成六个 格子（六位支付密码）
    var per = size.width / 6.0;
    var offsetX = per;
    while (offsetX < size.width) {
      canvas.drawLine(Offset(offsetX, 0.0), Offset(offsetX, size.height), mRectPaint);
      offsetX += per;
    }

    ///  画实心圆
    var half = per / 2;
    var radio = per / 8;
    mPwdPaint.style = PaintingStyle.fill;

    ///  当前有几位密码，画几个实心圆
    for (int i = 0; i < pwd.length && i < 6; i++) {
      canvas.drawArc(
          Rect.fromLTRB(i * per + half - radio, size.height / 2 - radio, i * per + half + radio,
              size.height / 2 + radio),
          0.0,
          2 * pi,
          true,
          mPwdPaint);
    }
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    return true;
  }
}
